<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.image" mode=""></image>
				<image src="/static/image/Index/2.png" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- 内容 -->
		<view class="order-content">
			<view class="order-content-one flex justify-between">
				<view class="order-content-one-left">
					头部舒缓按摩
				</view>
				<view class="order-content-one-right">
					已售60+
				</view>
			</view>
			<view class="order-content-two">
				按摩头部可以促进我们的大脑放松，压力大的时候按摩一下
				促进脑部血液循环，达到释放压力的效果。
			</view>
		</view>
		<view class="btn" @click="$helper.to('/pages/tabBar/activity/oderStatus/oderStatus')">
			立即下单
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[
					{
						image:'/static/image/logo.jpg'
					},
					{
						image:'/static/image/Index/1.png'
					},
					{
						image:'/static/image/Index/2.png'
					},
				],//轮播图
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// background: #F8F8F8;
		background: #fff;
	}
	// 轮播图
	.screen-swiper {
		width: 100%;
		height: 750rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		image {
			width: 100%;
			height: 100%;
			margin-right: 20rpx;
		}
	}
	.order-content{
		padding: 20rpx;
		.order-content-one-left{
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
		.order-content-one-right{
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}
		.order-content-two{
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 40rpx;
			margin-top: 10rpx;
		}
	}
	.btn{
		position: fixed;
		bottom: 100rpx;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		background-color: #000000;
		left: 50%;
		transform: translate(-50%);
		border-radius: 50rpx;
	}
	::v-deep uni-swiper .uni-swiper-dot {
		background: #FFFFFF;
		border: 1rpx solid #fff;
		opacity: 0.6;
	}

	::v-deep uni-swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
		width: 32rpx;
		height: 16rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	::v-deep uni-swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
		background: rgba(0, 0, 0, 0);
	}
</style>